<template>
  <div class="page1">
    <Row class="listTop">
      <Col span="12">
        <div class="leftTop">
          <span class="title"
          ><span class="title-gradient">卫生医疗机构数</span></span
          >
          <span class="angle1"></span>
          <span class="angle2"></span>
          <span class="angle3"></span>
          <span class="angle4"></span>
          <div class="left1">
            <part1 :selectRangeDate="selectRangeDate" ref="chart1"></part1>
          </div>

        </div>
      </Col>
      <Col span="12">
        <div class="leftTop">
          <span class="title">
            <span class="title-gradient">2022 年各地区医疗卫生机构数</span>
          </span>
          <span class="angle1"></span>
          <span class="angle2"></span>
          <span class="angle3"></span>
          <span class="angle4"></span>

          <part2 ref="part2"></part2>

        </div>
      </Col>
    </Row>
    <Row class="listBottom">
      <Col span="12">
        <div class="content">
          <span class="title"
          ><span class="title-gradient">基层医疗卫生机构医疗服务量 </span></span
          >
          <span class="angle1"></span>
          <span class="angle2"></span>
          <span class="angle3"></span>
          <span class="angle4"></span>

          <part3/>

        </div>
      </Col>
      <Col span="12">
        <div class="content part4">
          <span class="title">
            <span class="title-gradient">2022 年各地区医院分科门急诊人次数</span>
          </span>
          <span class="angle1"></span>
          <span class="angle2"></span>
          <span class="angle3"></span>
          <span class="angle4"></span>
          <part4 ></part4>
        </div>
      </Col>

    </Row>
  </div>
</template>

<script>

const part1 = () => import("./components/page1/part1");
const part2 = () => import("./components/page1/part2");
const part3 = () => import("./components/page1/part3");
const part4 = () => import("./components/page1/part4");


export default {
  name: "page1",
  props: {
    selectRangeDate: Array,
  },
  components: {
    part1,
    part2,
    part3,
    part4,
  },
  data() {
    return {

      resizeFn: null,
    };
  },
  methods: {},
  watch: {

  },
  mounted() {
    this.resizeFn = this.$debounce(() => {
      // 通过捕获系统的onresize事件触发我们需要执行的事件
      for (let i = 1; i < 18; i++) {
        this.$refs["chart" + i].setChart();
      }
    }, 500);
    window.addEventListener("resize", this.resizeFn);
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.resizeFn);
  },
};
</script>

<style lang="less">
.page1 {
  height: 100%;
  width: 100%;
  padding: 14px 20px 20px;
  background: #03044a;
  overflow: hidden;

  .listTop {
    height: 60%;

    .ivu-col {
      height: 100%;
      padding: 10px;

      .leftTop {
        width: 100%;
        height: 100%;
        border: 1px solid #0d2451;
        position: relative;

        .left1 {
          width: 100%;
          height: 100%;
        }


      }

      .rightTop-1 {
        width: 100%;
        height: 55%;
        border: 1px solid #0d2451;
        position: relative;
      }

      .rightTop-2 {
        width: 100%;
        margin-top: 5%;
        height: 40%;
        border: 1px solid #0d2451;
        position: relative;

        .rightTop-list {
          width: 100%;
          height: 100%;

          .list {
            width: 30%;
            height: 100%;
            float: left;

            &:first-child {
              width: 40%;
            }
          }
        }
      }
    }
  }

  .listBottom {
    height: 40%;

    .ivu-col-span-9 {
      width: 33.5%;
      margin-right: 0.6667%;
    }

    .ivu-col-span-4 {
      width: 17.66667%;
      margin-right: 0.6667%;
    }

    .ivu-col {
      height: 100%;
      padding: 10px;

      .content {
        margin-top: 30px;
        height: calc(~"100% - 30px");
        border: 1px solid #0d2451;
        position: relative;

        .ivu-row {
          &.topLine {
            height: 55%;
          }

          &.bottomPie {
            height: 45%;
          }

          .ivu-col {
            height: 100%;

            .charts-list {
              height: 100%;
              width: 100%;
            }
          }
        }

        &.part4 {
          width: 100%;
          //height: 100%;
          border: 1px solid #0d2451;
          position: relative;

          .rightTop-list {
            width: 100%;
            height: 100%;

            .list {
              width: 30%;
              height: 100%;
              float: left;

              &:first-child {
                width: 40%;
              }
            }
          }
        }

        .behavior {
          width: 100%;
          height: 100%;
        }

        .appUse {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}
</style>
